<template>
  <common-scroll class="wrapper"
                 ref="wrapper"
                 :data="list"
                 @scrollend="handleScrollend"
                 :listenScroll="listenScroll">
    <div class="content">
      <ul class="list">
        <li class="item"
            v-for="(item, index) of list"
            :key="item.id">
          <h3 class="title">{{item.shop_name}}</h3>
          <div class="time-wrap">
            <span class="day">{{item.appointment_day}}</span>
            <span class="time">{{item.appointment_time}}</span>
          </div>
          <div class="discounts">
            <span v-if="item.member_coupon_id>0">含优惠券：满{{item.tap_amount}}减{{item.money}}</span>
            <span else></span>
          </div>
          <div class="address">{{item.address}}</div>
          <div class="code"
               v-show="item.status ===1"
               @click="handleShowPop(index)">
            <i class="iconfont">&#xe74e;</i>
          </div>
          <div class="evaluate">
            <router-link class="write-comment"
                         v-show="item.is_evaluate === 0"
                         :to=" { path: `/reserve/evaluation/${item.id}`, query: {seller_id: `${item.seller_id}`}}"
                         tag="p"> 写评价</router-link>
            <p class="comment"
               v-show="item.is_evaluate === 1">已评价</p>
          </div>
          <div class="iconfont-div"
               v-show="item.status ===2">
            <i class="iconfont">&#xe997;</i>
          </div>
          <div class="iconfont-div check"
               v-show="item.status ===3">
            <i class="iconfont">&#xe60d;</i>
          </div>
        </li>
      </ul>
      <van-popup v-model="show"
                 class="">
        <img :src="imgUrl"
             alt="">
      </van-popup>
      <common-loading v-show="!list.length"></common-loading>
    </div>
  </common-scroll>

</template>

<script>
import CommonScroll from 'common/scroll/Scroll'
import CommonLoading from 'common/loading/Loading'
export default {
  name: 'ReserveList',
  props: {
    list: {
      type: Array
    }
  },
  components: {
    CommonScroll,
    CommonLoading
  },
  computed: {
    codeArray () {
      const result = []
      this.list.map((item) => {
        result.push(item.reservation_code)
      })
      return result
    }
  },
  data () {
    return {
      color: {
        color: '#050505'
      },
      show: false,
      imgUrl: '',
      scrollHeight: 0
    }
  },
  methods: {
    handleShowPop (index) {
      const code = this.codeArray[index]
      const URL_CODE = `http://api.dawei.zyuu.cn/api/qcode/reserve?code=${code}`
      this.show = true
      this.imgUrl = URL_CODE
    },
    handleScrollend (pos) {
      this.scrollHeight = -pos.y
    }
  },
  watch: {
    scrollHeight (newY) {
      this.$emit('refresh', newY)
    }
  },
  created () {
    this.listenScroll = true
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper >>> .van-modal
  position absolute
  left 0
  right 0
  bottom 0
  top 0

.wrapper
  touch-action none
  background-color $bgc
  z-index 2

  .content
    height 100%

  .list
    padding()
    padding-top 120px
    padding-bottom 100px

    .item
      padding-top 18px
      padding-left 30px
      padding-bottom 18px
      padding-right 30px
      background-color $bgcWh
      border-radius 16px
      margin-bottom 20px
      position relative

      .title
        ellipsis()
        box-sizing border-box
        padding-right 100px
        font-size $fzSecond
        color($fzColor)
        line-height 60px

      .time-wrap, .discounts
        display flex
        font-size $smallFz
        line-height 48px
        color $fzColor

        .day
          margin-right 18px

      .address
        ellipsis()
        line-height 52px
        font-size $smallFz
        color($fzColor)

      .code
        position absolute
        right 30px
        top 18px
        display flex
        flex-direction column
        justify-content center

        i
          font-size 80px
          color $fzColor

      .evaluate
        position absolute
        bottom 32px
        right 30px

        .write-comment, .comment
          font-size $fzFourthly
          color $navColor

        .comment
          color $grayFifth

      .iconfont-div
        position absolute
        top 0
        right 0

        i
          font-size 80px
          color $graySeventh

      .check
        i
          font-size 126px

      .state
        position absolute
        font-size $fzFifth
        top 18px
        line-height 60px
        right 30px

      .red
        color $forConsumption

      .green
        color $forEvaluate

      .black
        color $grayFifth

      .gray
        color $grayFifth
</style>
